<!-- Bread crumb is created dynamically -->
<!-- row -->
<div class="row">

    <!-- col -->
    <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
        <h1 class="page-title txt-color-blueDark">

            <!-- PAGE HEADER -->
            <i class="fa-fw fa fa-home"></i>
            Graphs
            <span>
                >
                Highchart Table
            </span>
        </h1>
    </div>
    <!-- end col -->

    <!-- right side of the page with the sparkline graphs -->
    <!-- col -->
    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
        <!-- sparks -->
        <ul id="sparks">
            <li class="sparks-info">
                <h5> My Income <span class="txt-color-blue">$47,171</span></h5>
                <div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
                    1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Traffic <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span></h5>
                <div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Orders <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span></h5>
                <div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
        </ul>
        <!-- end sparks -->
    </div>
    <!-- end col -->

</div>
<!-- end row -->

<!--
The ID "widget-grid" will start to initialize all widgets below
You do not need to use widgets if you dont want to. Simply remove
the <section></section> and you can use wells or panels instead
-->

<!-- widget grid -->
<section id="widget-grid" class="">

    <!-- row -->

    <div class="row">

        <div class="col-sm-12">

            <div class="alert alert-info">


                <h3 class="no-margin">jQuery HighchartTable</h3>
                <h5>Convert your HTML data tables into fancy Highcharts graphs without any coding!</h5>
                <ul>
                    <li>The HighchartTable plugin takes data and attributes from a table and parses them to simply create an Hightcharts chart</li>
                    <li>Control the graph dynamically and easily without any javascript</li>
                    <li>Builds automatically during page load, all you need to do is load the plugin</li>
                    <li>
                        See the full documentation <a href="http://highcharttable.org/#documentation" target="_blank">
                            <strong>here <i class="fa fa-link"></i> </strong>
                        </a>
                    </li>
                </ul>


            </div>

            <div class="col-sm-12 well">
                <div class="col-sm-6">
                    <table class="highchart table table-hover table-bordered" data-graph-container=".. .. .highchart-container2" data-graph-type="column">
                        <caption>Column example</caption>
                        <thead>
                        <tr>
                            <th>Month</th>
                            <th class="">Sales</th>
                            <th class="">Benefits</th>
                            <th class="">Expenses</th>
                            <th class="">Prediction</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>January</td>
                            <td class="">8000</td>
                            <td class="">2000</td>
                            <td class="">1000</td>
                            <td class="">9000</td>
                        </tr>
                        <tr>
                            <td>February</td>
                            <td class="">12000</td>
                            <td class="">3000</td>
                            <td class="">1300</td>
                            <td class="">10000</td>
                        </tr>
                        <tr>
                            <td>March</td>
                            <td class="">18000</td>
                            <td class="">4000</td>
                            <td class="">1240</td>
                            <td class="">11000</td>
                        </tr>
                        <tr>
                            <td>April</td>
                            <td class="">2000</td>
                            <td class="">-1000</td>
                            <td class="">-150</td>
                            <td class="">13000</td>
                        </tr>
                        <tr>
                            <td>May</td>
                            <td class="">500</td>
                            <td class="">-2500</td>
                            <td class="">1000</td>
                            <td class="">14000</td>
                        </tr>
                        <tr>
                            <td>June</td>
                            <td class="">600</td>
                            <td class="">-500</td>
                            <td class="">-500</td>
                            <td class="">15000</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-sm-6">
                    <div class="highchart-container2"></div>
                </div>
            </div>

            <div class="col-sm-12 well">
                <div class="col-sm-6">
                    <table class="highchart table table-hover table-bordered" data-graph-container=".. .. .highchart-container" data-graph-type="line">
                        <caption>Line example</caption>
                        <thead>
                        <tr>
                            <th>Month</th>
                            <th>Sales</th>
                            <th>Benefits</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>January</td>
                            <td>8000</td>
                            <td>2000</td>
                        </tr>
                        <tr>
                            <td>February</td>
                            <td>12000</td>
                            <td>3000</td>
                        </tr>
                        <tr>
                            <td>March</td>
                            <td>18000</td>
                            <td>4000</td>
                        </tr>
                        <tr>
                            <td>April</td>
                            <td>2000</td>
                            <td>-1000</td>
                        </tr>
                        <tr>
                            <td>May</td>
                            <td>500</td>
                            <td>-2500</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-sm-6">
                    <div class="highchart-container"></div>
                </div>
            </div>

            <div class="col-sm-12 well">
                <div class="col-sm-6">
                    <table class="highchart table table-hover table-bordered" data-graph-container=".. .. .highchart-container3" data-graph-type="column">
                        <caption>Column + area example</caption>
                        <thead>
                        <tr>
                            <th>Month</th>
                            <th>Sales</th>
                            <th data-graph-type="area">Benefits</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>January</td>
                            <td>8000</td>
                            <td>2000</td>
                        </tr>
                        <tr>
                            <td>February</td>
                            <td>12000</td>
                            <td>3000</td>
                        </tr>
                        <tr>
                            <td>March</td>
                            <td>18000</td>
                            <td>4000</td>
                        </tr>
                        <tr>
                            <td>April</td>
                            <td>2000</td>
                            <td>-1000</td>
                        </tr>
                        <tr>
                            <td>May</td>
                            <td>500</td>
                            <td>-2500</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-sm-6 ">
                    <div class="highchart-container3"></div>
                </div>
            </div>

        </div>

        <!-- end row -->

    </div>

    <!-- end row -->

</section>
<!-- end widget grid -->
@section Scripts {
    <script type="text/javascript">

        /* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

        pageSetUp();

        /*
         * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
         * eg alert("my home function");
         * 
         * var pagefunction = function() {
         *   ...
         * }
         * loadScript("/js/plugin/_PLUGIN_NAME_.js", pagefunction);
         * 
         * TO LOAD A SCRIPT:
         * var pagefunction = function (){ 
         *  loadScript(".../plugin.js", run_after_loaded);	
         * }
         * 
         * OR you can load chain scripts by doing
         * 
         * loadScript(".../plugin.js", function(){
         * 	 loadScript("../plugin.js", function(){
         * 	   ...
         *   })
         * });
         */

        // pagefunction

        var pagefunction = function() {
            // clears the variable if left blank
            $('table.highchart').highchartTable();
            //console.log("execute highchart")
        };


        // end pagefunction

        // destroy generated instances 
        // pagedestroy is called automatically before loading a new page
        // only usable in AJAX version!

        var pagedestroy = function() {

            /*
            Example below:
    
            $("#calednar").fullCalendar( 'destroy' );
            if (debugState){
                root.console.log("✔ Calendar destroyed");
            } 
    
            For common instances, such as Jarviswidgets, Google maps, and Datatables, are automatically destroyed through the app.js loadURL mechanic
    
            */
        };

        // end destroy

        // run pagefunction

        loadScript("/js/plugin/highChartCore/highcharts-custom.min.js",
            function() {
                loadScript("/js/plugin/highchartTable/jquery.highchartTable.min.js", pagefunction);
            });

    </script>
}
